<template>
  <div class="right_set">
       <h4>角色管理>权限设置</h4>
       <div class="container">
           <el-tree
                :data="data2"
                show-checkbox
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                @node-click="handleNodeClick"
                :filter-node-method="filterNode"
                check-on-click-node
                :default-expanded-keys="checkedArr"
                :default-checked-keys="checkedArr">
           </el-tree>
           <el-button type="primary"  style="margin:20px;" @click="saveRight()">取消</el-button>
           <el-button type="primary"  style="margin:20px;" @click="saveRight()">保存</el-button>
       </div>
  </div>
</template>

<script>
import { role_menu,save_role_menu } from '@/request/api'
export default {
   data(){
     return {
        checkedArr:[],
        data2: [
          {
            id: 1,
            label: '首页'
          }, 
          {
            id: 2,
            label: '系统用户',
            children: [
              {
                id: 10,
                label: '用户列表',
              }, 
              {
                id: 11,
                label: '角色列表'
              }
            ]
          }, 
        ],
        defaultProps: {
            children: 'children',
            label: 'label'
        }
     }
   },
   created(){
       this.get_role_menu();
   },
   methods: {
     saveRight(){
       
       let arr1 = this.$refs.tree.getCheckedKeys();
       let arr2 = this.$refs.tree.getHalfCheckedKeys();
       let arr3 = this.$refs.tree.getHalfCheckedNodes();
      //  console.log(arr3);
      //  获取被半勾选的id 
       let arr = arr1.concat(arr2);
       save_role_menu({
          roleId:this.$route.params.id,
          menuIds:arr.join(',')
       }).then(res => {
            console.log(res);
            if(res.code == 1) {
                this.$message({
                    message: '更新成功',
                    type: 'success'
                });
                this.$router.go(-1);
            }
       })
     },
     handleNodeClick(data){
          console.log(data);  
     },
     filterNode(value,data) {
          if (!value)  return true;
          console.log(data);
          if(data.level != value) {
              return data.id;
          }
     },
     get_role_menu(){
       role_menu({
          roleId:this.$route.params.id
       }).then(res => {
          console.log(res);
           this.data2 = res.data;
           this.checkedArr  = res.checked;
       })
     }
  }
}
</script>
<style  scoped>
.right_set h4 {
    line-height: 22px;
    border-left: 5px solid rgb(5, 129, 218);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
</style>